<template>
  <div class="article-main">
    <!-- 标题 -->
    <h1>{{ articleInfo.title }}</h1>
    <!-- 作者信息 -->
    <div class="article-head">
      <!-- 头像 -->
      <img :src="authorInfo.avatar_large" class="avatar-img" />
      <!-- 文章信息 -->
      <div class="article-info">
        <div class="author-name">{{ authorInfo.user_name }}</div>
        <div class="article-meta">
          <span class="article-rtime">
            {{ articleInfo.rtime | dateFormat }}</span
          >
          <span>阅读&nbsp;{{ articleInfo.view_count }}</span>
        </div>
      </div>
      <button><i class="el-icon-plus"></i> 关注</button>
    </div>
    <!-- 可能的封面 -->
    <img
      v-if="articleInfo.cover_image"
      :src="articleInfo.cover_image"
      class="cover_image"
    />
    <!-- 文章主体 -->
    <div
      class="markdown-body"
      v-highlight
      v-html="articleInfo.mark_content || articleInfo.content"
      id="markdown"
    ></div>
  </div>
</template>

<script>
export default {
  props: {
    articleInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    authorInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  }
}
</script>

<style lang="less" scoped>
.article-main {
  width: auto;
  padding: 2.667rem;

  .article-head {
    align-items: center;
    display: flex;
    margin-bottom: 1rem;

    .avatar-img {
      width: 3.33rem;
      height: 3.33rem;
      border-radius: 50%;
      margin-right: 1rem;
    }

    .article-info {
      flex: 1;

      .author-name {
        height: 2rem;
        vertical-align: top;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .article-meta {
        font-size: 1.167rem;
        color: var(--text-color);
      }

      .article-rtime {
        position: relative;
        margin-right: 1rem;
      }

      .article-rtime::after {
        width: 2px;
        height: 2px;
        content: ' ';
        position: absolute;
        right: -0.5rem;
        background-color: var(--text-color);
        top: 50%;
        border-radius: 50%;
      }
    }

    button {
      height: 3rem;
      padding: 0 1rem;
      font-size: 14px;
      background: rgba(30, 128, 255, 0.05);
      border: 1px solid rgba(30, 128, 255, 0.3);
      border-radius: 4px;
      display: flex;
      margin-left: auto;
      align-items: center;
      color: var(--taojin-brand-1-normal);
    }
  }

  .cover_image {
    width: 100%;
    margin: 1rem 0;
  }
}
</style>
